import React from 'react'
import './ImagePreview.scss'
import { Image } from 'antd';


interface IProps {
    index?: number;
    cdn?: boolean;
    paths?: string[];
    onClose?: () => void;
}
export default function ImagePreview(props: IProps) {
    const { index = 0, onClose = () => { }, cdn = true, paths = [] } = props;
    // const { imgCdn } = config.getHostConfig('default');
    const imgCdn = '';

    const [imagePaths, setImagePaths] = React.useState<string[]>(paths);
    const [currentIndex, setCurrentIndex] = React.useState(index);

    const onError = () => {
        // setImageSrc(ImageUtils.errorImage)
    }
    React.useEffect(() => {
        if (cdn) {
            setImagePaths(paths.map(path => imgCdn + path));
        }
    }, [])

    return (
        <>
            {
                <>
                    <Image.PreviewGroup
                        items={imagePaths}
                        preview={{
                            visible: true,
                            current: currentIndex,
                            onVisibleChange: (visible, prevVisible) => {
                                onClose();
                            },
                            onChange: (current, prev) => {
                                setCurrentIndex(current);
                            },
                        }}
                    >
                        <Image className='qb-preview-image' />
                    </Image.PreviewGroup>

                </>
            }


        </>
    )
}
